<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv=X-UA-Compatible content="IE=edge,chrome=1">
    <meta name="renderer" content="webkit">
    <title>WebSSH</title>
	
	<link href="../component/bootstrap/bootstrap.min.css" rel="stylesheet">
	<link href="../css/font-awesome.min.css" rel="stylesheet" type="text/css" >
	<link href="../component/scrollbar/jquery.scrollbar.min.css" rel="stylesheet">
	<link href="../component/nth-tabs/css/nth.tabs.min.css" rel="stylesheet">
	<!-- <link href="../component/bootstrap-treeview/bootstrap-treeview.min.css" rel="stylesheet">
	<link href="../component/contextMenu/jquery.contextMenu.min.css" rel="stylesheet"> -->
	<link href="../component/zTree_v3/css/zTreeStyle/zTreeStyle.css" type="text/css" rel="stylesheet">
	<link href="../component/zTree_v3/css/demo.css" type="text/css" rel="stylesheet" >
	<link href="../css/xterm.css" rel="stylesheet"/>
	
	<script src="../js/jquery.min.js"></script>
	<script src="../component/bootstrap/bootstrap.min.js"></script>
    <script src="../component/scrollbar/jquery.scrollbar.min.js"></script>
	<script src="../component/nth-tabs/js/nth.tabs.min.js"></script>
	<!-- <script src="../component/bootstrap-treeview/bootstrap-treeview.min.js"></script> 
	<script src="../component/contextMenu/jquery.contextMenu.min.js"></script>
	<script src="../component/contextMenu/jquery.ui.position.js"></script>-->
	<script src="../component/zTree_v3/js/jquery.ztree.core.js" type="text/javascript" ></script>
	<script src="../component/zTree_v3/js/jquery.ztree.excheck.js" type="text/javascript" ></script>
	<script src="../component/zTree_v3/js/jquery.ztree.exedit.js" type="text/javascript" ></script>
	<script src="../js/xterm.js" charset="utf-8"></script>
	<script src="../js/webssh.js" charset="utf-8"></script>

    <script>
		var nthTabs;
        $(function () {
           /*  nthTabs = $("#editor-tabs").nthTabs();
            nthTabs.addTab({
                id:'b',
                title:'猪八戒-关不掉',
                content:'高老庄娶媳妇',
				active:true,
				allowClose:false,
            }).setActTab("#c");    */
            initTree();
        }); 
        var zTree, rMenu;
        function initTree(){
        	var setting = {
       			edit: {
       				enable: true
       			},
       			data: {
       				simpleData: {
       					enable: true
       				}
       			},
    			callback: {
    				onRightClick: OnRightClick
    			}
       		};
        	var zNodes =[
    	 			{ id:1, pId:0, name:"所有会话", open:true},
    	 			{ id:11, pId:1, name:"会话1"}
    	 		];
        	$.fn.zTree.init($("#treeview"), setting, zNodes);
        	
        	zTree = $.fn.zTree.getZTreeObj("treeview");
			rMenu = $("#rMenu"); 
        }
        function OnRightClick(event, treeId, treeNode) {
			if (!treeNode && event.target.tagName.toLowerCase() != "button" && $(event.target).parents("a").length == 0) {
				zTree.cancelSelectedNode();
				showRMenu("root", event.clientX, event.clientY);
			} else if (treeNode && !treeNode.noR) {
				zTree.selectNode(treeNode);
				showRMenu("node", event.clientX, event.clientY);
			}
		}

		function showRMenu(type, x, y) {
			$("#rMenu ul").show();
			if (type=="root") {
				$("#m_del").hide();
				$("#m_check").hide();
				$("#m_unCheck").hide();
			} else {
				$("#m_del").show();
				$("#m_check").show();
				$("#m_unCheck").show();
			}

            y += document.body.scrollTop;
            x += document.body.scrollLeft;
            rMenu.css({"top":y+"px", "left":x+"px", "visibility":"visible"});

			$("body").bind("mousedown", onBodyMouseDown);
		}
		function hideRMenu() {
			if (rMenu) rMenu.css({"visibility": "hidden"});
			$("body").unbind("mousedown", onBodyMouseDown);
		}
		function onBodyMouseDown(event){
			if (!(event.target.id == "rMenu" || $(event.target).parents("#rMenu").length>0)) {
				rMenu.css({"visibility" : "hidden"});
			}
		}
        function addTreeNode() {
			hideRMenu();
			var newNode = { name:"增加" + (addCount++)};
			if (zTree.getSelectedNodes()[0]) {
				newNode.checked = zTree.getSelectedNodes()[0].checked;
				zTree.addNodes(zTree.getSelectedNodes()[0], newNode);
			} else {
				zTree.addNodes(null, newNode);
			}
		}
		function removeTreeNode() {
			hideRMenu();
			var nodes = zTree.getSelectedNodes();
			if (nodes && nodes.length>0) {
				if (nodes[0].children && nodes[0].children.length > 0) {
					var msg = "要删除的节点是父节点，如果删除将连同子节点一起删掉。\n\n请确认！";
					if (confirm(msg)==true){
						zTree.removeNode(nodes[0]);
					}
				} else {
					zTree.removeNode(nodes[0]);
				}
			}
		}
		function hideRMenu() {
			if (rMenu) rMenu.css({"visibility": "hidden"});
			$("body").unbind("mousedown", onBodyMouseDown);
		}
    </script>
</head>
<body>
<div class="container" style="margin-top: 65px;border:1px solid black;height:450px;width:65%;">
	<div class="row">
		<div class="col-md-3" style="border:1px solid black;height:445px;">
			<div id="treeview">
			
			</div>
		</div>
		<div class="col-md-9">
			<div class="nth-tabs" id="editor-tabs">
			
			</div>
		</div>
	</div>
</div>
<div id="rMenu">
	<ul>
		<li id="m_add" onclick="addTreeNode();">增加节点</li>
		<li id="m_del" onclick="removeTreeNode();">删除节点</li>
	</ul>
</div>
</body>
</html>